<template>
	<view class="publish_layout flex-column">
		<textarea v-model="data.content" placeholder="说说你的想法与感受,2000字以内" class="textarea" :maxlength='2000'
			@input="circle_textarea_input" />
		<view class="count">{{count}}/2000</view>
		<uni-file-picker v-model="data.imageUrl" title='上传图片 最多可以上传9张' class="file_picker" :limit="9"></uni-file-picker>
		<view class="submit" @click="circle_publish_submit_click">提交</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app'

	const count = ref(0)

	const data = ref({
		_id: '',
		content: '',
		imageUrl: []
	})

	const circleObj = uniCloud.importObject('circleObj')

	onLoad(async (params) => {
		console.log('发布备考心得', params);
		if (!params.id) {
			return
		}
		let res = await circleObj.circle_detail(params.id)
		if (res.errCode != 0) {
			return
		}
		data.value = res.data
		// 计算字数
		count.value = data.value.content.length
	})

	function circle_textarea_input(params) {
		count.value = params.detail.value.length
	}

	// 发布心得
	async function circle_publish_submit_click() {
		if (data.value.content.length == 0) {
			uni.showLoading({
				title: '请说说你的想法与感受'
			})
			return
		}
		let res = await circleObj.publish(data.value)
		let flag = res.errCode == 0
		uni.showToast({
			title: flag ? "发布成功" : res.errMsg,
			icon: flag ? 'success' : 'fail'
		})
		// 发送通知
		uni.$emit('circle_publish_success')
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.publish_layout {
		background-color: white;
		padding: 40rpx;

		.textarea {
			width: 100%;
			border-radius: 12rpx;
			padding: 20rpx;
			height: 400rpx;
			font-size: 28rpx;
			background-color: $me-color-background;
		}

		.count {
			display: flex;
			margin-top: 20rpx;
			justify-content: flex-end;
			color: $me-color-gray-7;
		}

		.file_picker {
			margin-top: 20rpx;
		}

		.submit {
			color: white;
			width: 400rpx;
			height: 80rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin: 20rpx auto 0;
			border-radius: 40rpx;
			justify-content: center;
			background-color: $me-color-blue;
		}
	}
</style>